import { ref, onMounted, onUnmounted, watch } from 'vue'
import mainStore from '@/store'

export function useViewWH(componentRef) {
  const width = ref(0)
  const height = ref(0)
  const store = mainStore()
  const getComponentSize = () => {
    const rect = componentRef.value.getBoundingClientRect()
    width.value = rect.width
    height.value = rect.height
  }

  watch(() => store.type, () => {
    getComponentSize()
  })

  onMounted(() => {
    getComponentSize()
    window.addEventListener('resize', getComponentSize)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', getComponentSize)
  })
  return { width, height }
}

